// 组件，我的请假
import React, { Component } from 'react'
import { Select, Input, DatePicker, Space } from 'antd'
import type { DatePickerProps } from 'antd';
import './Leave.css'
import service from '../../../utils/service';
const { TextArea } = Input;
const { Option } = Select;
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
};
export default class Redact extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            // 教室姓名
            names:'',  
            // 教室部门
            dis:'',
            // 请假类型
            tys:'',
            //开始时间
            stas:'',
            // 结束时间
            eds:'',
            // 原因
            yuy:''
        }
    }
    // 双向绑定
    Input1 = (e: any) => {
        this.setState({
            names:e.target.value
        })
    }
    Input2 = (e: any) => {
        this.setState({
            dis:e.target.value
        })
    }
    // 点击确定跳转发请求
    // 如果其他地方需要修改只需要改待审批
    sure = () => {
        this.props.history.push('/Main/Leave/Mytime')
        service({
            url:`/teacher/${this.props.location.query.record.id}`,
            method:'patch',
            data:{
                start:this.state.stas,
                end:this.state.eds,
                caus:this.state.tys,
                yy:this.state.yuy,
            }
        })
    }
    cancel = () => {
        this.props.history.push('/Main/Leave/Mytime')
    }
    render() {
        return (
            <div>
                <h4>编辑</h4>
                <div className='box-edit'>
                    <div style={{ marginLeft: '40px', marginTop: '40px' }}>
                        请假类型：
                        <Select style={{ width: '311px', marginLeft: '20px', marginTop: '20px' }} onSelect={(value) => { this.setState({ tys: value }) }} placeholder="请假类型" allowClear>
                            <Option value="事假">事假</Option>
                            <Option value="病假">病假</Option>
                            <Option value="调休">调休</Option>
                            <Option value="产假">产假</Option>
                            <Option value="陪产假">陪产假</Option>
                            <Option value="婚假">婚假</Option>
                            <Option value="丧假">丧假</Option>
                        </Select>
                    </div>
                    <div style={{ marginLeft: '40px', marginTop: '40px' }}>
                        请假时间：
                        <Space direction="vertical">
                            <DatePicker onChange={(date, dateString) => { this.setState({ stas: dateString }) }} style={{ width: '311px', marginLeft: '20px' }} />
                        </Space>
                        &nbsp;&nbsp;&nbsp;— &nbsp;&nbsp;&nbsp;
                        <Space direction="vertical">
                            <DatePicker onChange={(date, dateString) => { this.setState({ eds: dateString }) }} style={{ width: '311px' }} />
                        </Space>
                    </div>
                    <div style={{ width: '648px', marginLeft: '40px', marginTop: '40px' }}>
                        请假原因：<TextArea rows={4} style={{ marginLeft: '90px' }} onChange={(e) => { this.setState({ yuy: e.target.value }) }} />
                    </div>
                    <div className='dv'>
                        <button onClick={this.sure} style={{ backgroundColor: '#1890FF', border: 'none', color: '#FFF', width: '80px', height: '35px', borderRadius: '4px', marginLeft: '15px', fontSize: '13px' }}>确定</button>
                        <button onClick={this.cancel} style={{ backgroundColor: '#FFF', border: '1px solid rgb(228, 228, 228)', color: '#333', width: '80px', height: '35px', borderRadius: '4px', marginLeft: '15px', fontSize: '13px' }}>取消</button>
                    </div>
                </div>
            </div>
        )
    }
}
